<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="./css/submenu.css" />
  <script type="text/javascript" src="./tools.js"></script>
  <style>
	* {
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			
			a,img {
				border: 0;
				text-decoration: none;
			}
			
			body {
				font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
			}
  </style>
</head>
<body>
  	<div id="my_menu" class="sdmenu">
			<div>
				<span class="menuSpan">在线工具</span>
				<a href="#">图像优化</a>
				<a href="#">收藏夹图标生成器</a>
				<a href="#">邮件</a>
				<a href="#">htaccess密码</a>
				<a href="#">梯度图像</a>
				<a href="#">按钮生成器</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">支持我们</span>
				<a href="#">推荐我们</a>
				<a href="#">链接我们</a>
				<a href="#">网络资源</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">合作伙伴</span>
				<a href="#">JavaScript工具包</a>
				<a href="#">CSS驱动</a>
				<a href="#">CodingForums</a>
				<a href="#">CSS例子</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">测试电流</span>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
			</div>
		</div>
<script type="text/javascript">
	window.onload = function () {
			/*
		* 我们的每一个菜单都是一个div
		* 	当div具有collapsed这个类时，div就是折叠的状态
		* 	当div没有这个类是，div就是展开的状态
		*/
		
		/*
			* 点击菜单，切换菜单的显示状态
			*/
		//获取所有的class为menuSpan的元素
		var menuSpan = document.querySelectorAll('.menuSpan')
				//定义一个变量，来保存当前打开的菜单div
		var openDiv = menuSpan[0].parentNode
		// 为span绑定单击响应函数
		for(var i=0;i<menuSpan.length;i++) {
			menuSpan[i].onclick = function () {
				//this代表我当前点击的span
						//获取当前span的父元素
					var parentNode = this.parentNode
					// 判断当前div菜单是否有collapsed
					toggleClass(parentNode,'collapsed')
					// 切换菜单的显示状态
					// toggleMenu(parentNode);
					//判断openDiv和parentDiv是否相同
					if(openDiv != parentNode && !hasClass(openDiv,'collapsed')){
							//打开菜单以后，应该关闭之前打开的菜单
							//为了可以统一处理动画过渡效果，我们希望在这将addClass改为toggleClass
							// addClass(openDiv , "collapsed");
							//此处toggleClass()不需要有移除的功能，这里发挥的是添加折叠效果
							// 这里换成这个之后，一旦上一个打开的具备折叠属性，但是你现在打开的不是上一个
							// 就会将上一个打开的折叠属性去除，就会默认打开几个菜单了，所以这里要去掉移除功能
							// 所以这里只能进入的是，上一个打开的和这一个不同的，并且上一个打开的，没有折叠属性的
							toggleClass(openDiv , "collapsed");
							//切换菜单的显示状态
							// toggleMenu(openDiv);
						}
						
						//修改openDiv为当前打开的菜单
						openDiv = parentNode;


			}
		};

		// 用来切换菜单div折叠的显示状态
	// 	function toggleMenu (obj) {
	// 		// 切换之前，获取元素高度
	// 		var begin = obj.offsetHeight
	// 		// 切换div的显示
	// 		// 先给元素加上或者删除这个类属性
	// 		toggleClass(obj,'collapsed')
	// 		// 切换类之后获取一个高度
	// 		var end = obj.offsetHeight
	// 		console.log("begin="+begin+",end="+end)
	// 		obj.style.begin = begin + 'px'
	// 		// 执行动画
	// 		move(obj,'height',end,10,function() {
	// 			//动画执行完毕，内联样式已经没有存在的意义了，删除之
	// 			obj.style.height = "";
	// 		})
	// 	}
	}
</script>
</body>
</html>